<template>
  <div class="init-note">
    <uni-popup ref="popup" background-color="transparent" @change="change">
      <div class="note-content" @click="close">
        <div @click.stop="">
          <div class="main-content">
            <div class="letter-content">
              <img class="bg" mode="aspectFill" src="../../static/images/init-letter/letter-bg.png" alt="">
              <div>
                <div class="letter-info">
                  <!--全市广大市民群众及各市场主体经营者：-->
                  <!--近年来，菏泽市委、市政府高度重视优化营商环境工作，深入贯彻落实国家、省关于优化营商环境决策部署，加快推进“放管服”改革，有效激发市场活力，营商环境不断优化。部门作风好不好，广大市民群众和市场主体感受最深!为切实推动部门作风转变，全面提升服务质量、效率和水平，市委、市政府决定在全市开展“三亮”（亮人员身份、亮制度职责、亮评价结果）专题行动，由广大市民群众和市场主体对承担审批、监管等职能的重点部门和人员进行“不记名投票”评议，并运用评议结果兑现奖惩措施。-->
                  <!--评议过程不抽取任何信息，并对您提交的信息做到严格保密。诚邀您参与评价，对各部门和工作人员做出真实评价并提出宝贵建议。-->
                  <!--我们将用好评议结果，推动优化营商环境改革走向深入，不断提升广大市民群众和市场主体获得感和满意度，为全市经济社会高质量发展作出新贡献！-->
                  <h2>全市广大市民群众及各市场主体经营者：</h2>
                  <p>近年来，菏泽市委、市政府高度重视优化营商环境工作，深入贯彻落实国家、省关于优化营商环境决策部署，加快推进“放管服”改革，有效激发市场活力，营商环境不断优化。部门作风好不好，广大市民群众和市场主体感受最深!为切实推动部门作风转变，全面提升服务质量、效率和水平，市委、市政府决定在全市开展“三亮”（亮人员身份、亮制度职责、亮评价结果）专题行动，由广大市民群众和市场主体对承担审批、监管等职能的重点部门和人员进行“不记名投票”评议，并运用评议结果兑现奖惩措施。</p>
                  <p>评议过程不抽取任何信息，并对您提交的信息做到严格保密。诚邀您参与评价，对各部门和工作人员做出真实评价并提出宝贵建议。</p>
                  <p>我们将用好评议结果，推动优化营商环境改革走向深入，不断提升广大市民群众和市场主体获得感和满意度，为全市经济社会高质量发展作出新贡献！</p>
                </div>
              </div>
            </div>
            <div class="bottom">
              <img mode="widthFix" src="../../static/images/init-letter/letter-bottom.png" />
              <uni-icons class="close" type="close" size="30" color="white" @click="close" />
            </div>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
  
  export default {
    name: 'InitNote',
    components: {},
    props: {},
    data() {
      return {
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.popupShow(true);
      });
    },
    created() {
    },
    methods: {
      close() {
        this.popupShow(false);
      },
      popupShow(isShow) {
        const popup = this.$refs.popup[ 0 ] || this.$refs.popup;
        if (isShow) {
          popup.open('center');
          return;
        }
        popup.close();
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close');
          }, 500);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .note-content {
    width: 90vw;
    padding: 100px 0;
    > div {
      position: relative;
      .main-content {
        display: flex;
        position: relative;
        padding: 0 15px 40px;
        max-width: 350px;
        margin: auto;
        .letter-content {
          position: relative;
          z-index: 100;
          padding: 10px;
          background-position: center;
          background-size: cover;
          flex: 1;
          border-radius: 10px;
          .bg {
            border-radius: 10px;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
          }
          > div {
            border-radius: 5px;
            overflow: hidden;
            padding: 15px 0;
            background-color: #faf7ef;
            position: relative;
            z-index: 10;
            .letter-info {
              max-height: calc(100vh - 300px);
              overflow: auto;
              padding: 0 10px;
              color: #325470;
              h2 {
                font-size: 14px;
                line-height: 1.5;
                font-weight: 600;
              }
              p {
                font-size: 14px;
                line-height: 1.5;
                margin-top: 5px;
                text-indent: 28px;
              }
            }
          }
        }
        .bottom {
          position: absolute;
          z-index: 1;
          width: 100%;
          bottom: 0;
          left: 0;
          .close {
            position: absolute;
            display: block;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
          }
          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
</style>
